<template>
  <div class="app">
    <ScreenSection1 ref="setSectionRef" />
    <ScreenSection2 ref="setSectionRef" />
    <ScreenSection3 ref="setSectionRef" />
    <ScreenSection4 ref="setSectionRef" />
    <ScreenSection5 ref="setSectionRef" />
    <ScreenSection6 ref="setSectionRef" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { gsap } from 'gsap';
import ScreenSection1 from './pages/showCasePages/ScreenSection1.vue';
import ScreenSection2 from './pages/showCasePages/ScreenSection2.vue';
import ScreenSection3 from './pages/showCasePages/ScreenSection3.vue';
import ScreenSection4 from './pages/showCasePages/ScreenSection4.vue';
import ScreenSection5 from './pages/showCasePages/ScreenSection5.vue';
import ScreenSection6 from './pages/showCasePages/ScreenSection6.vue';

const sectionRefs = ref([]); // 存放每个分屏的refs

// 用于更新分屏refs数组
const setSectionRef = (el) => {
  if (el) sectionRefs.value.push(el);
};

onMounted(() => {
  const observerOptions = {
    root: null, // 视口为观察区域
    threshold: 0.5, // 50% 可见性时触发
  };

  // IntersectionObserver 回调
  const observerCallback = (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const index = sectionRefs.value.findIndex((section) => section === entry.target);
        // 使用 GSAP 平滑滚动到该分屏位置
        gsap.to(window, {
          scrollTo: index * window.innerHeight,
          duration: 1,
          ease: 'power2.in',
        });
      }
    });
  };

  // 创建 IntersectionObserver 实例
  const observer = new IntersectionObserver(observerCallback, observerOptions);

  // 观察每个分屏
  sectionRefs.value.forEach((section) => observer.observe(section));

  // 组件销毁时清除观察
  onUnmounted(() => {
    observer.disconnect();
  });
});
</script>

<style scoped>
.app {
  height: 100vh; /* 设置为视口高度 */
  overflow-y: scroll; /* 允许垂直滚动 */
  scroll-snap-type: y mandatory; /* 启用滚动吸附效果 */
}

.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start; /* 启用吸附对齐 */
}

</style>
 